<template>
  <div>
    <ContentTitle :info="ctInfo" />
    <!-- 表单 -->
    <el-tabs
      class="bg-fff mt-10 mb-10"
      v-model="activeName"
      type="card"
      @tab-click="handleChangeTab"
    >
      <el-tab-pane label="所有设备" name="all"></el-tab-pane>
      <el-tab-pane label="loRaPP" name="LoRaPP"></el-tab-pane>
      <el-tab-pane label="LoRaWAN" name="LoRaWAN"></el-tab-pane>
      <div>
        <el-form ref="form" :model="query" label-width="80px" class="el-col-9">
          <el-form-item label="EUI">
            <el-input v-model="query.eui"></el-input>
          </el-form-item>

          <el-form-item label="在线状态">
            <el-select
              v-model="query.online"
              placeholder="请选择在线状态"
              class="el-col-1"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 选择日期 -->
          <el-form-item label="绑定时间">
            <el-date-picker
              v-model="query.date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item>
            <el-button-group>
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-search"
                @click="onSubmit"
                >搜索</el-button
              >
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-delete"
                @click="handleClear"
                >清除</el-button
              >
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-refresh"
                @click="handleRefersh"
                >刷新</el-button
              >
            </el-button-group>
            <span class="search-span">搜索结果：{{ total }}</span>
          </el-form-item>
        </el-form>
      </div>
    </el-tabs>
    <!-- 网关表格 -->
    <template>
      <el-table :data="gatewayList" border style="width: 100%">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="eui" label="eui号"></el-table-column>
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="mhz" label="频率"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.online | onlineType }}
          </template>
        </el-table-column>
        <el-table-column prop="country" label="国家"> </el-table-column>
        <el-table-column prop="agreement" label="协议"> </el-table-column>
        <el-table-column prop="uTime" label="绑定时间">
          <template slot-scope="scope">
            {{ scope.row.uTime | uTimeType }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- size-change 修改每页的属性， current-change 当前页面的变化、 current-page 当前页的页码
       page-sizes 每页有多少条的下拉框数据、page-size 默认的数据数量、 lauyout 分页显示那些配置项 total 页面的数据的总数量 -->
      <div class="block bg-fff center">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page="query.currPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </template>
  </div>
</template>
<script>
import ContentTitle from "@/components/ContentTitle.vue";
//引入后台接口
import { $gatewayList } from "@/api/index.js";
export default {
  name: "gateway",
  components: { ContentTitle },
  data() {
    return {
      ctInfo: {
        type: "网关",
        text: "网关列表",
        msg: "展示EUI、名称、状态、数据类型等设备信息，可根据EUI、群组、状态、绑定时间等条件筛选具体的传感器节点，并提供移动群组等功能。",
      },
      activeName: "all",
      gatewayList: [],
      query: {
        //查询和分页传给后台的默认数据
        currPage: 1,
        pageSize: 5,
        eui: "", //设备eui
        online: "all", //是否在线
        agreement: "all", //网组协议类型
        date: [], //搜索的日期
      },
      total: 0, //数据总数量
      options: [
        { value: true, label: "在线" },
        { value: false, label: "离线" },
        { value: "all", label: "全部" },
      ],
    };
  },
  //计算属性
  computed:{
    //每次修改时间段，默认把时间段的数组转为 有-的字符串
    dateStr(){
      let d1 = this.query.date[0];
      let d2 = this.query.date[1];
      let time1 = d1 && d1.getTime();
      let time2 = d2 && d2.getTime();
      if(time1 && time2){
        return time1 +'-' +time2
      }else{
        return '';
      }
    }
  },
  //过滤器
  filters: {
    //在线状态的过滤器
    onlineType(value) {
      return value ? "在线" : "离线";
    },
    uTimeType(value) {
      let date = new Date(value);
      let y = date.getFullYear(); // 获取完整的年份(4位,1970)
      let m = date.getMonth() + 1; // 获取月份(0-11,0代表1月,用的时候记得加上1)
      let d = date.getDate(); // 获取日(1-31)
      let y1 = y < 10 ? "0" + y : y;
      let m1 = m < 10 ? "0" + m : m;
      let d1 = d < 10 ? "0" + d : d;
      return `${y1} - ${m1} - ${d1}`;
    },
  },
  created() {
    this.getGateway();
  },
  methods: {
    //切换tab栏
    handleChangeTab(value) {
      console.log(value);
      //获取tab栏的name值
      this.query.agreement = value.name;
      //重新获取数据
      this.getGateway();
    },
    //清除搜索条件
    handleClear() {
      this.query = {
        //查询和分页传给后台的默认数据
        currPage: 1,
        pageSize: 5,
        eui: "", //设备eui
        online: "all", //是否在线
        agreement: "all", //网组协议类型
        date: [], //搜索的日期
      };
      //重新渲染数据
      this.getGateway();
    },
    //刷新页面
    handleRefersh() {
      this.$router.go(0);
    },
    getGateway() {

      console.log(this.dateStr);
      //需要将 搜索的数据重新赋值
      var queryStr = {...this.query};
      if(this.dateStr != ''){
        queryStr.date = this.dateStr
      }
      //需要将分页和查询的参数传给后台
      $gatewayList({ params: queryStr }).then((res) => {
        this.gatewayList = res.data.data;
        //给总数量赋值
        this.total = res.data.total;
      });
    },
    //提交表单的函数
    onSubmit() {
      //修改一个bug， 翻页到第二个搜索不到数据
      this.query.currPage = 1;
      //重新渲染数据
      this.getGateway();
    },
    //修改分页的每页显示条数
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.currPage = 1;
      //重新获取数据
      this.getGateway();
    },
    handleCurrentChange(val) {
      //将当前页的页码赋值给 currPage
      this.query.currPage = val;
      //重新获取数据
      this.getGateway();
    },
  },
};
</script>

<style scoped>
.search-span {
  margin-left: 5px;
}
.el-col-9 {
  width: 37.5%;
}
.el-col-1 {
  width: 100%;
}
</style>
